<template>
  <el-dialog
    custom-class="notice-preview-dialog"
    :visible="visible"
    top="5vh"
    left="10vw"
    center=""
    append-to-body
    @close="closeDialog">
    <el-scrollbar class="content">
      <div v-html-xss="htmlContent"></div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
    },
    noticeContent: {
      type: String,
    },
  },
  data() {
    return {}
  },
  computed: {
    htmlContent() {
      if (this.noticeContent) {
        return this.noticeContent.replace(/<br>/g, '<br />')
      }
      return ''
    },
  },
  watch: {},
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.notice-preview-dialog {
  ::v-deep &.el-dialog {
    // height: 80%;
    width: 21cm !important;
    height: 85%;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      padding: 0;
      padding-bottom: 30px;
      overflow: hidden;
      .content {
        height: 100%;
        color: #000;
      }
    }
  }
}
</style>
